<template>
    <div>
        <div ref="ages" id="age" style="width: 100%;height: 300px;"></div>
        <div v-if="detailVisible" :style="panelStyle">11111111111111</div>
    </div>
</template>

<script>
    /**
     select count(iscity),iscity from d left join u on d.id =u.userid and p='360se' group by u.iscity having
     count(iscity)>0
     */
    import echarts from 'echarts'

    export default {
        name: "age",
        data() {
            return {
                offsetX: '',
                offsetY: '',
                detailVisible: false,
                chart: null,
                iscityData: [{"count": 2027, "age": 12}, {"count": 2181, "age": 13}, {
                    "count": 2644,
                    "age": 14
                }, {"count": 2224, "age": 15}, {"count": 3124, "age": 16}, {"count": 8905, "age": 17}, {
                    "count": 5024,
                    "age": 18
                }, {"count": 35329, "age": 19}, {"count": 48528, "age": 20}, {
                    "count": 49811,
                    "age": 21
                }, {"count": 53224, "age": 22}, {"count": 65609, "age": 23}, {
                    "count": 73771,
                    "age": 24
                }, {"count": 86445, "age": 25}, {"count": 33382, "age": 26}, {
                    "count": 62680,
                    "age": 27
                }, {"count": 70036, "age": 28}, {"count": 44903, "age": 29}, {
                    "count": 109248,
                    "age": 30
                }, {"count": 63755, "age": 31}, {"count": 50875, "age": 32}, {
                    "count": 35107,
                    "age": 33
                }, {"count": 64345, "age": 34}, {"count": 26247, "age": 35}, {
                    "count": 55331,
                    "age": 36
                }, {"count": 20940, "age": 37}, {"count": 8806, "age": 38}, {
                    "count": 40107,
                    "age": 39
                }, {"count": 25422, "age": 40}, {"count": 22527, "age": 41}, {
                    "count": 33977,
                    "age": 42
                }, {"count": 8760, "age": 43}, {"count": 8654, "age": 44}, {"count": 13615, "age": 45}, {
                    "count": 5768,
                    "age": 46
                }, {"count": 6520, "age": 47}, {"count": 12572, "age": 48}, {"count": 3227, "age": 49}, {
                    "count": 1625,
                    "age": 50
                }, {"count": 9329, "age": 51}, {"count": 4140, "age": 52}, {"count": 737, "age": 54}, {
                    "count": 5404,
                    "age": 56
                }, {"count": 20078, "age": 57}, {"count": 652, "age": 59}, {"count": 1530, "age": 60}, {
                    "count": 850,
                    "age": 61
                }, {"count": 1400, "age": 62}, {"count": 6981, "age": 64}, {"count": 1965, "age": 73}]
            }
        },
        mounted() {
            this.chart = echarts.init(this.$refs.ages);
            let option = {
                tooltip: {
                    trigger: 'item',
                    formatter: function (val) {
                        return `${val.data.age}：${val.data.count / 1000}千次访问`
                    }
                },
                dataset: {
                    dimensions: ['count', 'age'],
                    source: this.parseData(this.iscityData)
                },
                series: [
                    {
                        center: ['50%', '50%'],
                        radius: [0, '50%'],
                        type: 'pie',
                        encode: {
                            itemName: 'age',
                            value: 'count'
                        },
                        label: {
                            formatter: function (val) {
                                if (val.data.iscity == -1) {
                                    return `未知(${val.percent}%)`;
                                }
                                return `${val.data.age}岁:(${val.percent}%)`
                            }
                        },
                    }
                ]
            };
            this.chart.setOption(option)
            let _this = this;
            this.chart.on('mouseover', function (e) {
                _this.offsetY = e.event.event.offsetY;
                _this.offsetX = e.event.event.offsetX;
                _this.detailVisible = true;
            });
            this.chart.on('mouseout', function (e) {
                _this.offsetY = e.event.event.offsetY;
                _this.offsetX = e.event.event.offsetX;
                _this.detailVisible = false;
            })
        },
        computed: {
            panelStyle() {
                return `width:500px;height:500px;position: fixed;left: 50%;top: ${this.offsetY}px; transform:translateX(-50%);border:2px solid yellow;`
            }

        }, methods: {
            parseData(arrItems) {

                let arr = [];
                let age1020 = {
                    count: 0,
                    age: '10-20'
                };
                let age2030 = {
                    count: 0,
                    age: '20-30'
                };
                let age3040 = {
                    count: 0,
                    age: '30-40'
                };
                let age4050 = {
                    count: 0,
                    age: '40-50'
                };
                let age5060 = {
                    count: 0,
                    age: '50-60'
                };
                let age6070 = {
                    count: 0,
                    age: '60-70'
                };

                for (let i = 0; i < arrItems.length; i++) {
                    let data = arrItems[i];
                    if (data.age > 10 && data.age <= 20) {
                        age1020.count += data.count;
                    } else if (data.age > 20 && data.age <= 30) {
                        age2030.count += data.count;
                    } else if (data.age > 30 && data.age <= 40) {
                        age3040.count += data.count;
                    } else if (data.age > 40 && data.age <= 50) {
                        age4050.count += data.count;
                    } else if (data.age > 50 && data.age <= 60) {
                        age5060.count += data.count;
                    } else if (data.age > 60 && data.age <= 70) {
                        age6070.count += data.count;
                    }
                }

                arr.push(age1020, age2030, age3040, age4050, age5060, age6070);
                return arr
            }
        }
    }
</script>

<style scoped>

</style>